<template>
  <div style="width: 1000px;">
    <el-row :gutter="10" style="width: 100%;">
      <el-col :span="16">
        <div style="background-color: white;height: 700px;">
          <div class="setup">
            <h3 style="color: black;margin: 0 0 10px 0">隐私</h3>
            <span style="font-size: 14px">隐私保护</span>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;line-height: 40px">隐私保护</h4>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>
          <div class="setup" style="height: 400px">
            <h4 style="color: black;line-height: 10px">上传头像</h4>
            <el-form>
              <el-form-item>
                <el-upload
                    v-model:file-list="fileList"
                    action="http://localhost:20300/attachment/upload"
                    name="file"
                    limit="1"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                >
                  <el-icon>
                    <Plus/>
                  </el-icon>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                  <img w-full :src="dialogImageUrl" alt="Preview Image"/>
                </el-dialog>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="save()">保存修改</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="border: 1px solid #e9e9eb;background-color: white">
          <div style="height: 100%;padding: 20px">
            <h3 style="color: black;margin: 0 0 10px 0">常见问题</h3>
            <p style="font-weight: bold;font-size: 15px;color: black;margin: 20px 0 10px 0">卡片贴纸设置</p>
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="1.什么是卡片贴纸，设置后会怎样？" name="1">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp;知乎盐选会员可使用专属的卡片帖纸，设置后用户的个人主页和关注页将会带上个性装扮，快去看看吧！
                </div>
              </el-collapse-item>
            </el-collapse>

            <p style="font-weight: bold;font-size: 15px;color: black;margin: 20px 0 10px 0">其他问题</p>
            <p class="question">2.网站出现了问题？<span style="color: #1989fa">问题反馈</span></p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import { ElMessage } from 'element-plus'
import qs from "qs";

const user = ref({});

const fileList = ref([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleSuccess = (response,uploadFile,uploadFiles)=>{
  user.value.imgUrl='file'+response.data;
  if (user.value.imgUrl!=null){
    ElMessage({
      message:'图片上传成功!',
      type:'success',
    })
    console.log(user.value.imgUrl);
  }
}

const handleRemove = (uploadFile, uploadFiles) => {
  user.value.imgUrl=null;
  // console.log(uploadFile, uploadFiles)
  // console.log(uploadFile.response.data);
  let url = uploadFile.response.data;
  let data={url:url};

  console.log('urlvq：'+data);
  axios.post('http://localhost:20300/attachment/remove',qs.stringify(data))
      .then((response) => {
        if (response.data != null) {
          ElMessage({
            message:'图片删除完成!',
            type:'success',
          })
        }
      })
}
</script>

<style scoped>
.setup{
  height: 80px;
  border-bottom: 1px solid #e9e9eb;
  padding: 20px 18px;

}
.question{
  font-size: 15px;margin: 20px 0 0 0;
  color: #8493a5;
  cursor: pointer;
  font-size: 13px;
}
.question:hover{
  color: #056DE8;
}
p{
  color: #056DE8;
  cursor: pointer;
}
.user{
  padding-left: 25px;
  color: #8493a5;
}
span{
  font-size: 14px;
}
</style>